<template>

    <div>


        <div class="user-list unified-bg-white unifined-border-radius">

            <div class="box-head flex unified-flex-space-between ">

                <span class="box-head-title">Type List</span>

                <div class="user-list-head-search-box flex ">
                    <div class="user-list-head-search">
                        <input type="" name="" id="" value="" class="user-list-head-search-input" />
                        <span class="user-list-head-search-btn el-icon-search"></span>
                    </div>

                    <!-- 添加按钮 -->
                    <span class="user-list-head-action-btn el-icon-circle-plus-outline" @click="add"></span>
                    <!-- 全选/反选 -->
                    <el-dropdown>
                        <span class="user-list-head-action-btn el-icon-more"></span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>全选</el-dropdown-item>
                            <el-dropdown-item>反选</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>

            <div class="unified-table-padding">
                <el-table v-loading="pageLoading" ref="user-table" :data="list">

                    <el-table-column type="selection" width="55">
                    </el-table-column>

                    <el-table-column label="Type">
                        <template slot="header">

                            <div class="tableHeader">
                                <span>Type</span>
                            </div>

                        </template>


                        <template slot-scope="scope">
                            <div class="tableHeader">
                                {{scope.row.type}}
                            </div>
                        </template>
                    </el-table-column>
                    
                    
                    <el-table-column label="Code">
                        <template slot="header">
                    
                            <div class="tableHeader">
                                <span>Code</span>
                            </div>
                    
                        </template>
                    
                    
                        <template slot-scope="scope">
                            <div class="tableHeader">
                                {{scope.row.code}}
                            </div>
                        </template>
                    </el-table-column>
                    
                    
                    
                    
                    <el-table-column label="comment">
                        <template slot="header">
                    
                            <div class="tableHeader">
                                <span>Comment</span>
                            </div>
                    
                        </template>
                    
                    
                        <template slot-scope="scope">
                            <div class="tableHeader">
                                {{scope.row.comment}}
                            </div>
                        </template>
                    </el-table-column>
                    
                    <el-table-column label="Add Time">
                        <template slot="header">
                    
                            <div class="tableHeader">
                                <span>Add Time</span>
                            </div>
                    
                        </template>
                    
                    
                        <template slot-scope="scope">
                            <div class="tableHeader">
                                {{scope.row.addTime | turnTime}}
                            </div>
                        </template>
                    </el-table-column>
                    

                    <el-table-column label="State">
                        <template slot="header">
                            <div class="tableHeader">
                                <span>State</span>
                            </div>
                        </template>

                        <template slot-scope="scope">
                            <div style="padding: 0px 0px;"
                                class="tableHeader flex unified-flex-space-around unified-flex-align">
                                <el-tag size="small">
                                {{ status[scope.row.status] }}
                                </el-tag>
                            </div>
                        </template>
                    </el-table-column>


                    <el-table-column label="操作" width="140">

                        <template slot="header">
                            <div class="tableHeader">
                                <span>操作</span>
                            </div>
                        </template>

                        <template slot-scope="scope">
                            <div class="tableHeader flex unified-flex-space-between unified-flex-align">
                                <el-button type="primary" size="mini" @click="edit(scope.row._id)">编辑
                                </el-button>

                                <el-button slot="reference" type="danger" size="mini"
                                    @click="remove(scope.$index,scope.row._id)">删除</el-button>

                            </div>
                        </template>
                    </el-table-column>

                </el-table>
            </div>


        </div>


    </div>


</template>

<script>
    import Mixin from '../../mixin/list.js'

    export default {
        mixins: [Mixin],
        data() {
            return {
                api: this.$api.user,
                status:['正常','停用']
            }
        },

        methods: {

            add() {
                this.$router.push("/Home/add/user-type")

            },
            remove() {
                this.$confirm('此操作将永久删除该用户的所有信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
            },
            edit() {
                
            }
        },
        created() {

            this.$axios({
                url: this.api,
                method: "GET",
                params: {
                    action: "userType"
                }
            }).then(res => {
                console.log(res.data);
                if (res.data.code == 0) {
                    this.list = res.data.data
                } else {
                    this.$message.error(res.data.msg)
                }
            }).finally(() => {


                this.setPageLoading(false)

            })



        }



    }
</script>

<style>
</style>
